function $(el){
    return document.querySelector(el)
};
function gets(el){
    return [...document.querySelectorAll(el)]
};
let inp = $('.total input'),
    totalNum = $('.totalNum'),
    select = $('#select'),
    content = $('.content'),
    page = $('.page'),
    pages= gets('.page li'),
    inp2 = $('.url input'),
    leftBut = $('.leftBut'),
    rightBut = $('.rightBut')
   
   
    
inp.addEventListener('input',(e)=>{
    let reg = /^\d{1,}$/,
    val = inp.value.trim()
    if(!reg.test(val)) return;
    // content.classList.add('show')
    totalNum.innerHTML = `共${val}条`;
});
select.addEventListener('click',(e)=>{
    let res = '',
        num = select.value,
        val = inp.value.trim(),
        ul = page.firstElementChild
    ul.innerHTML = '';
    pages.length = Math.ceil(val/num)
    for(i=0;i<pages.length;i++){
        res+=`<li>${i+1}</li>`
    }
    page.firstElementChild.innerHTML = res;
    page.firstElementChild.firstElementChild.classList.add('active');
    let lis = [...page.firstElementChild.children];
    lis.forEach((li,index)=>{
        li.addEventListener('click',(e)=>{
            let active = $('.active')
                active && active.classList.remove('active')
                lis[index].classList.add('active')
                inp2.value = li.innerHTML
        })
    })
 })
 document.addEventListener('keypress',(e)=>{
    let code = e.keyCode;
    if(code === 13){
        let reg1 = /^\d{1,}$/,
            idx = inp2.value-1,
            active = $('.active'),
            ul = page.firstElementChild,
            lis = [...ul.children]
        if(!reg1.test(inp2.value)) return;
        active && active.classList.remove('active');
        if(idx>lis.length-1) {
            idx = lis.length-1
        }
        if(idx<0) idx = 0
        lis[idx].classList.add('active')
        ul.style.left = "-"+idx*35+"px"
    }
 })

rightBut.addEventListener('click',(e)=>{
    let active = $('.active'),
        idx = active.innerHTML,
        ul = page.firstElementChild,
        lis = [...ul.children]
    active && active.classList.remove('active');
    if(idx>lis.length-1) {
        rightBut.style.background = '#'
        idx = lis.length-1
        lis[idx].classList.add('active')
         ul.style.left = `-${(idx-2)*35}px`
    }else{
        lis[idx].classList.add('active')
        if(idx<3) return;
        ul.style.left = `-${(idx-2)*35}px`
        rightBut.style.background = '#eee'
    }      
})


